<template>
	<view class="main">
		<!--公共头部-->
		<my-header :background="background" :is-back="true" title="团队管理"></my-header>

		<view class="main-head mar-bot-10">
			<u-sticky>
				<!-- 只能有一个根元素 -->
				<u-search placeholder="人员搜索" v-model="keyword" :show-action="false" height="50"></u-search>
				<u-gap height="2" bg-color="#bbb" margin-top="20" margin-bottom="20"></u-gap>
			</u-sticky>
			<view class="dis_flex jus-con text-align" >
				<view v-for="(item,index) in tagList" :key="index">
					<view class="dis_flex ali-ite jus-cen">
						<view>
							<view class="pad-bot-5">{{item.count}}</view>
						</view>
					</view>
					<view>
						<text style="margin-left:3px;">{{item.name}}</text>
					</view>
				</view>
			</view>
		</view>

		<view @click="click(item.id)" class="main-body-e mar-top-5" v-for="(item,index) in userList" :key="index">
			<view class="dis_flex">
				<view class="mar-rig-15">
					<u-image width="140rpx" height="140rpx" border-radius="120" src="https://oaxiaochengxu.0871.cn/morentouxiang.jpg">
					</u-image>
				</view>
				<view>
					<view class="mar-top-3">
						<span>{{item.name}}</span>
						<span class="mar-lef-10">{{item.H9}}</span>
					</view>
					<view class="mar-top-3">
						<span>职位：</span>
						<span>{{item.role}}</span>
						<span class="mar-lef-10">
							<u-tag size="mini" text="权责" mode="dark" type="success" />
						</span>
					</view>
					<view class="mar-top-3">
						<span>所属市场：</span>
						<span>{{item.market}}</span>
					</view>
					<view class="mar-top-3">
						<span>入职时间：</span>
						<span>{{item.time}}</span>
					</view>
				</view>
			</view>
		</view>

	</view>
</template>

<script>
	import myHeader from '@/components/workbench/header.vue';
	import myFooter from '@/components/workbench/footer.vue';
	export default {
		data() {
			return {
				userList: '',
				tagList: '',
				keyword: '',
				background: {
					backgroundColor: ' ',
				},
			}
		},
		components: {
			myHeader,
		},
		onLoad() {
			this.onSelect();
		},
		methods: {
			//人员点击事件
			click(id) {
				this.navigateTo('/pages/team/details?id=' + id);
			},
			// 首次查询人员信息
			async onSelect() {
				let res = await this.asyncPublic('/team/Index/onSelect', 1)
				console.log(res)
				this.userList = res.data.data
				this.tagList = res.data.list
			},
			change(index) {
				this.current = index;
			}
		},
		// 下拉改变头部背景色
		onPageScroll(res) {
			if (res.scrollTop > 0) {
				this.background.backgroundColor = '#005687';
			} else {
				this.background.backgroundColor = ' ';
			}
		},
	}
</script>

<style>
	.main-head {
		width: 100%;
		background-color: #FFFFFF;
		padding: 24rpx;
		border-radius: 8px;
	}

	.main {
		padding: 10px;
		position: relative;
		min-height: 100vh;
		background-image: linear-gradient(#005687, #E4E4E5);
	}

	page {
		height: 100%;
	}
</style>
